<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	#imgid{
		width:128px;
		height:128px;
		position:absolute;
		top:0px;
		left:0px;
		overflow:hidden;
	}
	#imgid img{display:block;}
</style>
<body>
<div id='imgid'><img src="./picture/ball.jpg"></div>
</body>
<script type="text/javascript">
	imgobj=document.getElementById('imgid');
	screenHeight=document.documentElement.clientHeight;
	imgHeight=128;
	diffHeight=screenHeight-imgHeight;


	screenWidth=document.documentElement.clientWidth;
	imgWidth=128;
	diffWidth=screenWidth-imgWidth;

	ys=0;
	yv=10;

	xs=0;
	xv=10;
	setInterval(function(){
		ys+=yv;
		if(ys>=diffHeight){
			ys=diffHeight;
			yv=-yv;
		}
		if(ys<=0){
			yv=-yv;
		}
		imgobj.style.top=ys+'px';

		xs+=xv;
		
		if(xs>=diffWidth){
			xs=diffWidth;
			xv=-xv;
		}
		if(xs<=0){
			xv=-xv;
		}
		imgobj.style.left=xs+'px';

	},10);
</script>
</html>